<template>
  <div id="">
    <div class="paT55 ">
      <div class="search">
      </div>
      <div class="forms">
        <el-table ref="multipleTable"
          border
          stripe
          max-height="700"
          :data="tableData"
          style="width: 100%"
          class="tableLine"
          row-key="id">
          <el-table-column
            prop="createDate"
            show-overflow-tooltip
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            show-overflow-tooltip
            label="名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="sortNo"
            show-overflow-tooltip
            label="排序"
            align="center">
          </el-table-column>
          <el-table-column
            prop="enable"
            show-overflow-tooltip
            label="是否启用"
            align="center">
            <template slot-scope="scope">
              {{scope.row.enable ? '启用' : '不启用'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="explain"
            show-overflow-tooltip
            label="说明"
            align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="200">
            <template slot-scope="scope">
              <span class="pointer" @click="addDialog(scope.row)" v-if="!scope.row.parentId">
                新增 <i class="line"></i>
              </span>
              <span class="pointer" @click="updateDialog(scope.row)">修改</span>
              <span class="pointer" @click="removeData(scope.row)" v-if="scope.row.parentId">
                <i class="line"></i> 删除
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :title="detailEditType == 'edit' ? '修改参数' : '新增参数'" :width="'30%'" :before-close="cancel" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rulesAdd" ref="ruleAddForm" label-width="140px" class="demo-ruleForm">
        <el-row v-if="false">
          <el-col :span="20">
            <el-form-item label="KEY" prop="key">
              <el-input v-model="addForm.key"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="addForm.parentId">
          <el-col :span="20">
            <el-form-item label="上级" prop="parentId">
              <el-select v-model="addForm.parentId">
                <el-option v-for="(item, i) in this.tableData" :key="i" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="名称" prop="name">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="排序" prop="sortNo">
          <el-input-number v-model="addForm.sortNo"></el-input-number>
        </el-form-item>
        <el-form-item label="是否启用" prop="enable">
          <el-radio v-model="addForm.enable" :label="true">启用</el-radio>
          <el-radio v-model="addForm.enable" :label="false">不启用</el-radio>
        </el-form-item>
        <el-row>
          <el-col :span="20">
            <el-form-item label="名称" prop="explain">
              <el-input type="textarea" :autosize="{ minRows: 3}" v-model="addForm.explain" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="detailEditType == 'edit'" class="dialogBtn" type="primary" @click="updateData('ruleAddForm')">修 改</el-button>
        <el-button v-else type="primary" @click="addData('ruleAddForm')" class="dialogBtn">添 加</el-button>
        <el-button type="primary" @click="cancel" class="dialogBtn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import collectionApi from '@/api/collectionApi'

export default {
  name: 'paramManage',
  data () {
    return {
      module: 'COLLECT',
      tableData: [],
      addForm: {
        enable: true
      },
      detailEditType: 'detail',
      dialogFormVisible: false,
      rulesAdd: {
        name: [
          {required: true, message: '名称不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.findPageData()
  },
  methods: {
    findPageData () {
      collectionApi.findParamModule({
        module: this.module
      }).then((res) => {
        if (res.data.messageType === '0') {
          this.tableData = res.data.result
        }
      })
    },
    addDialog (row) {
      this.detailEditType = 'add'
      this.addForm.parentId = row.id
      console.log(this.addForm)
      this.dialogFormVisible = true
    },
    addData (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.addForm)
          params.module = this.module
          collectionApi.addParam(params).then((res) => {
            if (res.data.messageType === '0') {
              this.$notify({
                title: '消息',
                message: ('添加成功!'),
                position: 'bottom-right',
                showClose: false,
                type: 'success'
              })
              this.cancel()
              this.findPageData()
            } else {
              this.$notify.error({
                title: '消息',
                message: '添加失败'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    updateDialog (row) {
      this.detailEditType = 'edit'
      collectionApi.getParam(row.id).then((res) => {
        if (res.data.messageType === '0') {
          this.addForm = res.data.result
          this.dialogFormVisible = true
        }
      })
    },
    updateData (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.addForm)
          collectionApi.updateParam(params).then((res) => {
            if (res.data.messageType === '0') {
              this.$notify({
                title: '消息',
                message: ('修改成功!'),
                position: 'bottom-right',
                showClose: false,
                type: 'success'
              })
              this.cancel()
              this.findPageData()
            } else {
              this.$notify.error({
                title: '消息',
                message: '修改失败'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    removeData (row) {
      let tips = ''
      if (row) {
        tips = `此操作将删除: ${row.name}, 是否继续?`
      } else {
        return
      }
      this.$confirm(tips, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        collectionApi.deleteParam(row.id).then((res) => {
          if (res.data.messageType === '0') {
            this.$notify({
              title: '消息',
              message: ('删除成功！'),
              position: 'bottom-right',
              showClose: false,
              type: 'success'
            })
            this.findPageData()
          }
        })
      }).catch((error) => {
        console.log(error)
      })
    },
    cancel () {
      this.addForm = {
        enable: true
      }
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .el-upload {
    margin-top: 6.5px;
  }

  .upload {
    background: transparent;
    border: 1px solid #00ffff;
    color: #00ffff;
    border-radius: 0;
    margin-left: 40px;
  }

  .search {
    margin: 30px 0 0 57px;
  }

  .forms {
    width: 94%;
    overflow: hidden;
    margin: 10px 0 0 3%;

    & /deep/ .el-tooltip__popper {
      background-color: red;
    }
  }

  table.table-all tr td {
    border: 1px solid #D3D3D3;
  }

  /deep/ .el-input__icon {
    margin-top: 3px;
  }

  /deep/ .el-collapse {
    outline: 0;
    border: 0;
  }

  /deep/ .el-collapse-item__header {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: transparent;
    color: #FFF;
    cursor: pointer;
    border: 0;
  }

  /deep/ .el-collapse-item__content {
    padding-bottom: 0px;
    font-size: 13px;
    color: #FFF;
    border-bottom: 0;
  }

  /deep/ .el-collapse-item__wrap {
    background-color: transparent;
    border-bottom: 0;
  }

  /deep/ .el-collapse-item__header {
    font-size: 16px;
    padding-left: 11px;
    border-bottom: 1px solid #D3D3D3;
    width: 98.9%;
  }

  /deep/ .el-collapse-item__header.is-active {
    font-size: 16px;
    padding-left: 11px;
  }

  /deep/ .el-collapse-item__arrow {
    margin-right: 35px;
  }

  /deep/ .el-collapse-item__arrow.is-active {
    margin-right: 35px;
  }

  /deep/ .el-button--primary {
    border-radius: 0;
  }

  /deep/ .table-select {
    width: 180px;
    height: 35px;
    border: 1px solid #fff;
    background: 0 0;
    color: #D3D3D3;
  }

  .footer {
    margin-top: 40px;
    color: #ffffff;
    font-size: 16px;

    .info {
      .select {
        width: 52px;
        height: 35px;
      }

      .select /deep/ .el-input__inner {
        padding-left: 5px;
        padding-right: 0;
      }

      .select /deep/ .el-input__icon {
        width: 15px;
      }

      .select /deep/ .el-select__caret {
        /*transform:rotate(270deg);*/
        /*color: black;*/
      }

      .select /deep/ .el-select__caret.is-reverse {

      }
    }

    .paging {
      /*background-color: pink;*/
      text-align: right;
      padding-right: 30px;
      margin-top: -20px;

      & /deep/ .el-pagination.is-background .btn-prev {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination.is-background .btn-next {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pager li {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination__total, & /deep/ .el-pagination__sizes {
        float: left;
        font-size: 1.6rem;
        height: 35px;
        line-height: 35px;
      }

      & /deep/ .el-input__inner {
        /*width:52px;*/
        height: 35px;
      }

      & /deep/ .el-input__icon {
        /*width: 20px;*/
        /*line-height: 3;*/
      }

      & /deep/ .el-input .el-input__inner {
        padding-right: 20px;
        color: #FFFFFF;
        font-size: 1.6rem;
      }
    }
  }
</style>
